<template>
  <div class="partyinfo">
    <!-- partyeducation -->

    <el-button class="goback" @click="goback()" type="primary">返回</el-button>
    <img class="imgbox" :src="list.infodata.imgsrc" alt="" />
    <h1>{{ list.infodata.title }}</h1>
    <h4>{{ list.infodata.info }}</h4>
    <!-- {{ list.infodata }} -->
  </div>
</template>

<script setup lang="ts">
const list = reactive({
  infodata: "",
});
//首先在setup中定义
const route = useRoute();
const router = useRouter();
watch(
  () => route.query.userId,
  (val) => {
    getdata()
  }
);

const goback = ()=>{
    router.go(-1)
}

//query
onMounted(() => {
    getdata()
//   onUnmounted(() => {
//     list.infodata = "";
//   });
});
const getdata = ()=>{
    let userId = route.query.userId;
  // console.log("ssssssssssss",userId);
  axios.get("/datajson/index3.json").then((res) => {
    let {
      data: { infodata },
    } = res;
    // console.log(res);
    const selectdata = infodata.filter((data) => {
      return data.title.indexOf(userId.toString()) !== -1;
    });
    list.infodata = selectdata[0];
  });
}

//params
// let userId=route.params.userId;
</script>

<style lang="scss" scoped>
.partyinfo {
  width: 80%;
  text-align: center;
  .imgbox {
    width: 70%;
  }
  .goback{
    float: left;
  }
}
</style>
